*{
    margin:0;
    padding:0;
}
body{
    font-family:"微软雅黑";
    background-color:white;
}
.box{
    padding:15px;
}
.box .head span{
    font-size:18px;
    /*color:#333;*/
}
.box .head{
    margin-bottom:20px;
}
.box .head a{
    text-decoration:none;
    float:right;
    font-size:15px;
    color:white;
}
.box .head a:hover{
    color:#F00;
}
.box ul li{
    width:135px;
    height:140px;
    list-style:none;
    position:relative;
    float:left;
    margin-left:20px;
    margin-bottom:18px;
    overflow:hidden;
}
.box ul li .deatil{
    width:130px;
    height:138px;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:-240px;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
}
.box ul li .deatil h2{
    font-size:20px;
    color:#fff;
    text-align:center;
    padding-top:18px;
    }
.box ul li .deatil p{
    font-size:16px;
    text-align:center;
    margin:13px;
    color:#fff;
}
.box ul li .deatil a{
    font-size:12px;
    display:block;
    color:#fff;
    background-color:#009688;
    text-decoration:none;
    width:80px;
    height:30px;
    text-align:center;
    line-height:30px;
    margin:0 auto;
}
.box ul li:hover .deatil{
    top:0;
}